<template>
	<view class="content">
		<view class="bg-white">
			<titleBar title="文章世界" text-align="center"></titleBar>
		</view>
		<view>
			<scroll-view :style="{height: scprllHeight + 'rpx'}" scroll-y="true" :refresher-enabled="isPort"
				:refresher-triggered="triggered" :refresher-threshold="100" refresher-background="lightblack"
				@refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
				@refresherabort="onAbort" @scrolltolower="onReachBottom" @scroll="onPageScroll">
				<view class="elist" v-for="(item,index) in announcementList " :key="index" :value="item"
					style=" padding: 5% 0 5% 5%;">
					<view>
						<view>{{item.title}}</view>
						<view class="look" @tap="into(announcementList[index])">
							查看详情&nbsp;&nbsp;&nbsp;></view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 侧边栏 -->
		<view>
			<uni-drawer ref="showLeft" mode="left" :mask-click="false" :width="320">
				<scroll-view style="height: 100%;" scroll-y="true">
					<view class="padding-top">
						<form action="" method="post" @submit="formSubmit">
							<view class="uni-common-mt">
								<view class="uni-form-item uni-column user-input searcher">
									<view class="title">标题:</view>
									<view class="input">
										<input class="uni-input" maxlength="15" placeholder="请输入文章标题" name="title" />
									</view>
								</view>

								<view class="uni-form-item uni-column user-input">
									<view class="title">作者:</view>
									<view class="input">
										<input class="uni-input" maxlength="10" placeholder="请输入文章作者" name="user" />
									</view>
								</view>

								<view class="uni-form-item uni-column user-input">
									<view class="title">时间:</view>
									<view class="input">
										<input class="uni-input" maxlength="10" placeholder="请输入创作时间" name="time" />
									</view>
								</view>
							</view>
							<button class="up-button" form-type='submit'>点击查询</button>
							<button class="up-button" @tap="backcon">点击返回</button>
							<view class="fenjie"></view>
							<view class="notes">
								<p><span>*</span>提示：请输入相关内容查询相关作品
								</p>
								<p><span>*</span>所输入的时间格式为：xxxx-xx-xx</p>
								<p><span>*</span>您可以随时对信息进行修改并再次提交</p>
								<p><span>*</span>您可以点击返回查看初始化内容</p>
							</view>
						</form>
					</view>
				</scroll-view>
			</uni-drawer>
		</view>
		<mybtn @tap="openbtn"></mybtn>
	</view>
</template>

<script>
	import titleBar from '../../components/titleBar/titleBar.vue'
	export default {
		data() {
			return {
				triggered: false,
				isPort: true,
				scrollTop: 0,
				title: 'Article',
				touchS: [],
				touchE: [],
				clickNumber: 0,
				announcementList: [

				],
				arr: [

				]

			}
		},
		onLoad() {
			this.getAnnouncementList()
		},
		methods: {
			getAnnouncementList() {
				var that = this
				that.announcementList = []
				uni.request({
					url: "https://www.turkeylike.cn:8900/fzulab/article/list",
					method: 'GET',
					data: {
						page: 1,
						limit: 100,
						// columnId: 3
					},


					success(res) {
						let urlList = res.data.result.list
						console.log(urlList)
						for (var i = 0; i < urlList.length; i++) {
							that.announcementList.push({
								'title': urlList[i].title,
								'content': urlList[i].content,
								'id': urlList[i].id,
								'createName': urlList[i].createName,
								'createDate': urlList[i].createDate,
								'remark': urlList[i].remark,
								'hits': urlList[i].hits,
								'titleImgUrl': urlList[i].titleImgUrl
							})
						}

					}
				})
				console.log(that.announcementList.length)
			},
			// 展开侧边栏
			showDrawer() {
				this.$refs.showLeft.open();
			},
			// 关闭侧边栏
			closeDrawer() {
				this.$refs.showLeft.close();
			},
			openbtn() {
				if (this.clickNumber == 0) {
					this.showDrawer()
					this.getAnnouncementList()
					this.clickNumber++
				} else {

					this.clickNumber = 0
					this.closeDrawer()

				}

			},
			// touchStart: function(e) {
			// 	// console.log(e.touches[0].pageX)
			// 	let sx = e.touches[0].pageX
			// 	let sy = e.touches[0].pageY
			// 	this.$data.touchS = [sx, sy]
			// },
			// touchMove: function(e) {
			// 	let sx = e.touches[0].pageX;
			// 	let sy = e.touches[0].pageY;
			// 	this.$data.touchE = [sx, sy]
			// },
			// touchEnd: function(e) {
			// 	let start = this.$data.touchS
			// 	let end = this.$data.touchE
			// 	console.log(start[0])
			// 	console.log(end[0])
			// 	console.log(start[1])
			// 	console.log(end[1])
			// 	if (start[0] < end[0] && this.triggered == false) {
			// 		console.log('右滑')
			// 	} else if (start[0] > end[0] && this.triggered == false) {
			// 		console.log('左滑')
			// 		this.closeDrawer()
			// 	} else {
			// 		console.log('静止')
			// 	}
			// },
			//是否开启自定义触发刷新
			onPageScroll(e) {
				this.scrollTop = e.scrollTop
				if (this.scrollTop < 300) {
					this.isPort = true
				} else {
					this.isPort = false
				}
			},

			// 下拉刷新操作
			//1、触发下拉操作（非刷新）
			onPulling(e) {
				this.triggered = true
			},
			//2、触发刷新
			onRefresh() {
				if (this._freshing) return
				this._freshing = true
				//显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框 
				wx.showLoading({
					title: '刷新中...',
				})
				// 添加定时器1秒后执行的操作
				setTimeout(() => {
					this.triggered = false
					this._freshing = false
					if (this.arr.length > 0) {
						this.announcementList = []
						this.announcementList = this.arr
					} else {
						this.getAnnouncementList()
					}
					console.log(this.arr);
					console.log(this.announcementList);
				}, 1000)
			},
			//3、触发重置
			onRestore() {
				this.triggered = 'restore' // 需要重置
				wx.hideLoading();
				wx.showToast({
					title: "刷新成功",
					duration: 1000, //提示的延迟时间，单位毫秒，默认：1500 
					mask: true //是否显示透明蒙层，防止触摸穿透，默认：false 			    
				})
				this.triggered = false
			},
			//4、触发终止
			onAbort() {
				//停止下拉刷新
				wx.stopPullDownRefresh();
			},
			onReachBottom() {
				wx.showToast({
					title: "已经到达底部",
					duration: 1500, //提示的延迟时间，单位毫秒，默认：1500 低于默认值可能有bug
					mask: true, //是否显示透明蒙层，防止触摸穿透，默认：false 			    
				})
			},

			getName(e) {
				console.log(e.detail)
				// 获取到input的值
				let name = e.detail.value;
				// 获取到光标的位置
				let local = e.detail.cursor;
				this.getAnnouncementList()
				return name
			},
			formSubmit(e) {
				// console.log(e)
				this.arr = []
				console.log(e.detail.value);
				var title = e.detail.value.title
				var createName = e.detail.value.user
				var createDate =e.detail.value.time
				console.log(title);
				console.log(createName);
				console.log(createDate);
				console.log(createDate.length);
				// for (var i = 0; i < this.announcementList.length; i++) {
				// 	this.arr.push(this.announcementList[i])
				// }
				if (title.length == 0 && createName.length == 0 && createDate.length == 0) {
					//后期修改提示样式
					wx.showToast({
						title: "请输入查询内容",
						duration: 1500, //提示的延迟时间，单位毫秒，默认：1500 低于默认值可能有bug
						mask: true, //是否显示透明蒙层，防止触摸穿透，默认：false 			    
					})
				} else {
					if (title.length != 0 && createName.length == 0 && createDate.length == 0) {
						this.announcementList.forEach((item) => {
							if (item.title.indexOf(title) > -1) {
								this.arr.push(item);
							}
						})
					} else if (title.length == 0 && createName.length != 0 && createDate.length == 0) {
						this.announcementList.forEach((item) => {
							if (item.createName.indexOf(createName) > -1) {
								this.arr.push(item);
							}
						})
					} else if (title.length == 0 && createName.length == 0 && createDate.length != 0) {
						this.announcementList.forEach((item) => {
							if (JSON.stringify(item.createDate).indexOf(createDate) > -1) {
								this.arr.push(item);
							}
						})
					} else if (title.length != 0 && createName.length != 0 && createDate.length == 0) {
						this.announcementList.forEach((item) => {
							if (item.title.indexOf(title) > -1 && item.createName.indexOf(createName) > -1) {
								this.arr.push(item);
							}
						})
					} else if (title.length != 0 && createName.length == 0 && createDate.length != 0) {
						this.announcementList.forEach((item) => {
							if (item.title.indexOf(title) > -1 && JSON.stringify(item.createDate).indexOf(createDate) > -1) {
								this.arr.push(item);
							}
						})
					} else if (title.length == 0 && createName.length != 0 && createDate.length != 0) {
						this.announcementList.forEach((item) => {
							if (JSON.stringify(item.createDate).indexOf(createDate) > -1 && item.createName.indexOf(createName) > -1) {
								this.arr.push(item);
							}
						})
					} else {
						this.announcementList.forEach((item) => {
							if (item.title.indexOf(title) > -1 && JSON.stringify(item.createDate).indexOf(createDate) > -1 && item
								.createName.indexOf(createName) > -1) {
								this.arr.push(item);
							}
						})
					}
					this.announcementList = this.arr
					this.closeDrawer()

				}
				console.log(this.arr);
				this.clickNumber = 0;
			},
			into(index) {

				//uni.navigateTo	保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
				// uni.navigateBack	关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
				uni.navigateTo({
					url: `/pages/article/detailed/detailed?title=${index.title}` +
						`&content=${encodeURIComponent(index.content)}` +
						`&createName=${index.createName}` + `&createDate=${index.createDate}` +
						`&remark=${index.remark}` + `&hits=${index.hits}` +
						`&titleImgUrl=${encodeURIComponent(index.titleImgUrl)}` + `&id=${index.id}`,
					success(res) {
						console.log("uni.navigateTo")
						console.log(index.title);
						console.log(index.content);
						console.log(index.createName);
						console.log(index.createDate);
						console.log(index.remark);
						console.log(index.hits);
						console.log(index.titleImgUrl);
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			backcon() {
				this.arr = []
				this.getAnnouncementList()
				this.closeDrawer()
				this.clickNumber = 0;
			}
			// entry(e) {
			// 	var title = e.detail.value.title
			// 	var createName = e.detail.value.user
			// 	var createDate = e.detail.value.time
			// 	console.log(title);
			// 	console.log(createName);
			// 	console.log(createDate);
			// 	var content = ''
			// 	if (title.length == 0 || createName.length == 0 || createDate.length == 0) {
			// 		//后期修改提示样式
			// 		wx.showToast({
			// 			title: "请将内容填写完整",
			// 			duration: 1500, //提示的延迟时间，单位毫秒，默认：1500 低于默认值可能有bug
			// 			mask: true, //是否显示透明蒙层，防止触摸穿透，默认：false 			    
			// 		})
			// 	} else {
			// 		this.announcementList.forEach((item) => {
			// 			if (item.title.indexOf(title) > -1 && item.createName.indexOf(createName) > -1 && item
			// 				.createDate
			// 				.indexOf(createDate) > -1) {
			// 				this.intoarr.push(item);
			// 				console.log(item.title.indexOf(title));
			// 				console.log(item.createName.indexOf(createName));
			// 				console.log(item.createDate.indexOf(createDate));
			// 				console.log(this.intoarr);
			// 				content = this.intoarr[0].content
			// 				createDate = this.intoarr[0].createDate
			// 				uni.navigateTo({
			// 					url: `/pages/article/detailed/detailed?title=${title}` +
			// 						`&content=${content}` +
			// 						`&createName=${createName}` + `&createDate=${createDate}`,
			// 					success(res) {
			// 						console.log("uni.navigateTo")
			// 						console.log(title);
			// 						console.log(content);
			// 						console.log(createName);
			// 						console.log(createDate);
			// 					},
			// 					fail(err) {
			// 						console.log(err)
			// 					}
			// 				})
			// 			}
			// 		})
			// 	}


			// }

		}
	}
</script>

<style lang="scss">
	.content {
		text-align: center;
		height: auto;
		font-size: 40rpx;
	}

	.user-input {
		width: 320px;
		margin: 20px auto;
		display: flex;

		.input {
			width: 200px;
			margin-left: 10px;
			border: 1px solid gray;
			border-radius: 5px;
		}
	}

	.fenjie {
		width: 320px;
		height: 1px;
		background: #ddd;
		margin-top: 5px;
	}

	.up-button {
		display: inline-block;
		width: 100px;
		height: 40px;
		background: linear-gradient(to right, rgb(2, 135, 246), rgb(25, 180, 188));
		border-radius: 5px;
		font-size: 16px;
		line-height: 40px;
		color: white;
		margin-bottom: 10px;
		margin-left: 15px;
	}

	.searcher {
		margin-top: 70px;
		margin-bottom: 5px;
	}

	.notes {
		width: 320px;
		margin: 20px auto 50px;
		font-size: 14px;

		span {
			color: red;
			margin-right: 4px;
		}

		p {
			color: #999;
		}
	}

	.title {
		margin-left: 20px;
	}

	.area {
		width: 200px;
		margin-left: 10px;
		border: 1px solid black;
	}

	.elist {
		background-color: #fff;
		text-align: left;
		margin-bottom: 1px;
	}

	.look {
		color: lightsalmon;
		font-size: 10px;
		text-align: right;
		padding-right: 5%;
		margin-top: 5px;
	}
</style>
